<template>
  <div class="honor" ref="honorRef">
    <div class="e-text mb-56">
      <div v-if="stats.honorData.hrStandGrade || stats.honorData.hrProfessionalCompetence">
        <p>{{ YEAR }}年</p>
        <p v-if="stats.honorData.hrStandGrade">你的职级提升至<span class="strong-word">{{ stats.honorData.hrStandGrade }}</span>
        </p>
        <p v-if="stats.honorData.hrProfessionalCompetence">专业能力提升至<span class="strong-word">{{
          stats.honorData.hrProfessionalCompetence }}</span></p>
        <p>你在奋斗的路上闪闪发光，</p>
        <p>新的一年，愿你成为更好的自己</p>
      </div>
      <div
        v-if="stats.honorData.intent || stats.honorData.utility || stats.honorData.design || stats.honorData.honorSoftwareCopyright || stats.honorData.honor6sigmaProject">
        <div class="mb-56">
          <p>这一年，</p>
          <div v-if="stats.honorData.intent || stats.honorData.utility || stats.honorData.design">
            <p>你共申请了<span class="strong-word">{{ stats.honorData.intent + stats.honorData.utility + stats.honorData.design
            }}</span>个专利</p>
            <p>
              <span v-if="stats.honorData.intent">发明<span class="strong-word">{{ stats.honorData.intent }}</span>个</span>
              <span v-if="stats.honorData.utility">实用新型<span class="strong-word">{{ stats.honorData.utility
              }}</span>个</span>
              <span v-if="stats.honorData.design">外观设计<span class="strong-word">{{ stats.honorData.design
              }}</span>个</span>
            </p>
          </div>
        </div>
        <div class="mb-56">
          <p v-if="stats.honorData.honorSoftwareCopyright">获得了<span class="strong-word">{{
            stats.honorData.honorSoftwareCopyright }}</span>个软件著作权</p>
        </div>
        <div class="mb-56">
          <p v-if="stats.honorData.honor6sigmaProject">通过了6Sigma 绿带 认证</p>
          <p>你才华横溢、智慧非凡，</p>
          <p>相信在“众星云集”的世界里，</p>
          <p>你终会成为最闪最亮的那一颗</p>
        </div>

      </div>

    </div>
    <img class="e-bg" src="@/assets/img/honor/honor.jpg" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { slideUp, slideDown } from "../../../../utils/slide";
import { YEAR } from "@/config/constants";
// import { changeStatusBarColor } from "@/cordova/common";
const props = defineProps<{
  stats: any;
}>();
const emit = defineEmits(["slideUp", "slideDown"]);

const honorRef = ref<any>(null);
onMounted(() => {

})
watch(honorRef, () => {

  slideUp(honorRef.value, () => {
    console.log("event", props.stats.honorData);
    emit("slideUp");
  });
  slideDown(honorRef.value, () => {
    emit("slideDown");
  });
});
</script>

<script lang="ts">
export default {
  name: "EventPage",
};

</script>

<style lang="scss" scoped>
.honor {
  @include full-screen-relative;
}

.e-text {
  @include animation-fade-in;
  position: absolute;
  top: 150px;
  left: 64px;
  z-index: 999;
  padding-right: 64px;

  p {
    font-size: 24px;
    line-height: 48px;
    color: $text-blue1;
  }
}

img {
  position: absolute;
}

.e-bg {
  @include animation-scale;
  bottom: 0;
  left: 122px;
  // height: 1083px;
  width: 100vw;
}
</style>
